<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const userId = ref(route.params.id)
const user = ref(null)

onMounted(async () => {
  // 模拟API调用
  user.value = {
    id: userId.value,
    name: `用户${userId.value}`,
    email: `user${userId.value}@example.com`
  }
})

const goToProfile = () => {
  router.push(`/users/${userId.value}/profile`)
}

const goToPosts = () => {
  router.push(`/users/${userId.value}/posts`)
}
</script>

<template>
  <div class="user-page">
    <h2>用户详情</h2>
    <div v-if="user" class="user-info">
      <p>ID: {{ user.id }}</p>
      <p>姓名: {{ user.name }}</p>
      <p>邮箱: {{ user.email }}</p>
      
      <div class="nav-buttons">
        <button @click="goToProfile">查看档案</button>
        <button @click="goToPosts">查看文章</button>
      </div>
      
      <!-- 嵌套路由出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
.user-page {
  padding: 20px;
}

.user-info {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.nav-buttons {
  margin: 15px 0;
}

button {
  margin-right: 10px;
}
</style> 